<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>检查项管理</title>
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!--<link rel="stylesheet" href="../../../static/plugins/elementui/index.css">-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- <link rel="stylesheet" href="../../../static/plugins/font-awesome/css/font-awesome.min.css">

     <link rel="stylesheet" href="../../../static/css/orderset.css">-->
</head>
<body>
<div id="app">
    <el-button type="primary" icon="el-icon-edit" circle @click="openAdd">新增检查组</el-button>
    <template>

        <el-table
                :data="tableData.list"
                height="500"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    label="编码"
                    prop="code" width="100">
            </el-table-column>
            <el-table-column
                    label="检查组名称"
                    prop="name" width="100">
            </el-table-column>
            <el-table-column
                    label="帮助编码"
                    prop="helpCode" width="100">
            </el-table-column>
            <el-table-column
                    label="性别"
                    prop="sex"
                    width="220">

                <template slot-scope="scope" width="180">
                    <label v-if="tableData.list[scope.$index].sex==0">男女适用</label>
                    <label v-if="tableData.list[scope.$index].sex==1">男</label>
                    <label v-if="tableData.list[scope.$index].sex==2">女</label>
                </template>
            </el-table-column>
            <el-table-column
                    label="注意事项"
                    prop="attention" width="220">
            </el-table-column>
            <el-table-column
                    label="备注"
                    prop="remark" width="180">
            </el-table-column>


            <el-table-column
                    fixed="right"
                    width="280">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="name"
                            size="mini"
                            placeholder="输入姓名查找" @input="showCheckGroup(name)"/>
                </template>
                <template slot-scope="scope">
                    <el-button type="info" icon="el-icon-message" circle @click="openDetails(scope.row)">查看详情
                    </el-button>
                    <el-button
                            size="mini"
                            @click="dialogFormVisibleOpen(scope.row)">修改
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteCheckGroup(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-pagination
            background
            layout="prev, pager, next"
            :current-page="tableData.pageNum"
            :page-size="tableData.pageSize"
            :total="tableData.total"
            @current-change="showCheckGroup(name,$event)">
    </el-pagination>
    <p>当前为:{{tableData.pageNum}}页,总页数为:{{tableData.pages}},总条数为:{{tableData.total}}</p>


    <!--编辑-->
    <el-dialog title="检查组编辑" :visible.sync="dialogFormVisible">
        <template>
            <el-tabs v-model="activeName">
                <el-tab-pane label="检查组编辑" name="first">
        <el-form :model="form">
            <el-form-item label="检查项编码" :label-width="formLabelWidth">
                <el-input :disabled="true" v-model="form.code" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="检查项名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="帮助编码" :label-width="formLabelWidth">
                <el-input :disabled="true" v-model="form.helpCode" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="form.sex" placeholder="请选择">
                    <el-option
                            label="男女合适"
                            value="0">
                    </el-option>
                    <el-option
                            label="男"
                            value="1">
                    </el-option>
                    <el-option
                            label="女"
                            value="2">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="注意事项" :label-width="formLabelWidth">
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="form.attention">
                </el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="form.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
                </el-tab-pane>
                <el-tab-pane label="检查项配置" name="second">
                    <table class="datatable">
                        <thead>
                        <tr>
                            <th>选择</th>
                            <th>角色名称</th>
                            <th>角色说明</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="c in checkItemList">
                            <td>
                                <input :id="c.id" v-model="checkItemIds" type="checkbox" :value="c.id">
                            </td>
                            <td><label :for="c.id">{{c.name}}</label></td>
                            <td><label :for="c.id">{{c.description}}</label></td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
            </el-tabs>
        </template>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible=false,checkItemIds=[]">取 消</el-button>
            <el-button type="primary" @click="updateCheckGroup  (form)">确 定</el-button>
        </div>
    </el-dialog>


    <!--新增-->
    <el-dialog title="检查组新增" :visible.sync="dialogFormVisible2">
        <el-form :model="form2">
            <el-form-item label="检查项编码" :label-width="formLabelWidth">
                <el-input v-model="form2.code" @blur="count(form2.code)" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="检查项名称" :label-width="formLabelWidth">
                <el-input v-model="form2.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="帮助编码" :label-width="formLabelWidth">
                <el-input v-model="form2.helpCode" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="form2.sex" placeholder="请选择">
                    <el-option
                            label="男女合适"
                            value="0">
                    </el-option>
                    <el-option
                            label="男"
                            value="1">
                    </el-option>
                    <el-option
                            label="女"
                            value="2">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="注意事项" :label-width="formLabelWidth">
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="form2.attention">
                </el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="form2.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-checkbox  v-for="item in checkList" v-model="checkList2" :label="item.id" :key="item.key">{{item.name}}</el-checkbox>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2=false">取 消</el-button>
            <el-button type="primary" @click="addCheckGroup(checkList2,form2)">确 定</el-button>
        </div>
    </el-dialog>


    <!--查看详情-->
    <el-dialog title="检查组详情" :visible.sync="dialogFormVisible3">
        <p><b>此检查组包含了以下检查项目:</b></p>
        <p v-for="(item,index) in checkItems">
            序号:<b>{{index + 1}}</b>------项目:<b>{{item.name}}</b>
        </p>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible3=false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible3=false">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>


<script src="../../../static/js/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../../../static/js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            tableData: [],
            form: {
                id: '',
                code: '',
                name: '',
                helpCode: '',
                sex: '',
                attention: '',
                remark: ''
            },
            form2: {
                id: '',
                code: '',
                name: '',
                helpCode: '',
                sex: '',
                attention: '',
                remark: ''
            },
            formLabelWidth: '120px',
            dialogFormVisible: false,
            dialogFormVisible2: false,
            name: '',
            pageNum: '',
            id: '',
            dialogFormVisible3: false,
            checkItems: [],checkList:[],
            checkList2:[]
        }, data() {
            return {
                tableData: [],
                form: {
                    id: '',
                    code: '',
                    name: '',
                    helpCode: '',
                    sex: '',
                    attention: '',
                    remark: ''
                },
                form2: {
                    id: '',
                    code: '',
                    name: '',
                    helpCode: '',
                    sex: '',
                    attention: '',
                    remark: ''
                },
                formLabelWidth: '120px',
                dialogFormVisible: false,
                dialogFormVisible2: false,
                name: '',
                pageNum: '',
                id: '',
                dialogFormVisible3: false,
                checkItems: [],
                checkList:[],
                checkList2:[],
                activeName:'first',
                checkItemIds:[],
                checkItemList:[]
            }
        }, methods: {
            success(name) {
                this.$message({
                    showClose: true,
                    message: name,
                    type: 'success'
                });
            }, error(name) {
                this.$message({
                    showClose: true,
                    message: name,
                    type: 'error'
                });
            }, showCheckGroup(name, pageNum) {
                this.pageNum = pageNum;
                /**
                 * 显示检查组
                 */
                axios.get("/checkGroup/showCheckGroup", {
                    params: {
                        'name': name,
                        'pageNum': pageNum
                    }
                }).then(data => {
                    if (data.data.code == '-998') {
                        this.error("你无该权限!")
                    } else if (data.data.code == null || data.data.code == '') {
                        this.tableData = data.data;
                    } else {
                        this.error("显示失败!")
                    }
                }).catch(e => {
                    alert("错误信息为:" + e)
                });
            }, dialogFormVisibleOpen(row) {
               // console.log(row)
                this.form.id = row.id;
                this.form.code = row.code;
                this.form.helpCode = row.helpCode;
                this.form.name = row.name;
                this.form.sex = String(row.sex);
                this.form.attention = row.attention;
                this.form.remark = row.remark;
                axios.get("/checkGroup/showCheckItem").then(data =>{
                    if (data.data.code=='-998'){
                        this.error("你无该权限!")
                    }else if (data.data.code==''||data.data.code==null){
                        this.checkItemList=data.data;
                        axios.get("/checkGroup/showCheckItemById",{
                            params:{
                                'id':row.id
                            }
                        }).then(data =>{
                            if (data.data.code==''||data.data.code==null){
                                this.checkItemIds=data.data;
                            }
                        });
                    }else {
                        this.error("显示失败!")
                    }
                });
                this.dialogFormVisible = true;
            }, updateCheckGroup(form) {
                axios.post("/checkGroup/updateCheckGroup.do?checkItemIds="+this.checkItemIds,form).then(data => {
                    if (data.data.code == '-998') {
                        this.error("你无该权限!")
                    } else if (data.data == 'true' || data.data == true) {
                        this.success("修改成功!");
                    } else {
                        this.error("修改失败!")
                    }
                    this.checkItemIds=[];
                    this.showCheckGroup(this.name, this.pageNum);
                    this.dialogFormVisible = false;
                }).catch(e => {
                    alert("错误信息为:" + e)
                });
            }, deleteCheckGroup(row) {
                console.log(row)
                this.$confirm('此操作将永久删除该会员, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/checkGroup/deleteCheckGroup", {
                    params: {
                        'id': row.id
                    }
                    }).then(data => {
                        if (data.data.code == '-998') {
                            this.error('你无该权限!')
                        } else if (data.data == '-997') {
                            this.error('已有套餐包含该检查组')
                        } else if (data.data == true || data.data == 'true') {
                            this.success('删除成功!')
                        } else {
                            this.error("删除失败!")
                        }
                        this.showCheckGroup(this.name, this.pageNum);
                    }).catch(e => {
                        alert('错误信息为:' + e)
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            }, openDetails(row) {
                this.checkItems = row.checkItems;
                this.dialogFormVisible3 = true;
            },openAdd(){
                axios.get("/checkGroup/showCheckItem").then(data =>{
                    if (data.data.code=="-998"){
                        this.error("你无该权限!")
                    }else if (data.data.code==null||data.data.code==''){
                        this.checkList=data.data;
                    }
                    this.dialogFormVisible2=true;
                }).catch(e =>{
                    alert("错误信息为:"+e)
                });
            },addCheckGroup(check,form){
                var checkGroup={
                    code: form.code,
                    name: form.name,
                    helpCode: form.helpCode,
                    sex: form.sex,
                    attention: form.attention,
                    remark:form.remark
                }
               axios.post("/checkGroup/addCheckGroup",{'checkGroup':checkGroup,'checkList':check}).then(data =>{
                   if (data.data.code=='-998'){
                       this.error("你无该权限!")
                   }else if (data.data==true||data.data=='true'){
                       this.success("新增成功!");
                   }else{
                       this.error("新增失败!");
                   }
                   this.showCheckGroup(this.name,this.pageNum);
                   this.dialogFormVisible2=false;
               }).catch(e =>{
                   alert("错误信息为:"+e)
               });
            },count(code){
                axios.get("/checkGroup/count",{
                    params:{
                        'code':code
                    }
                }).then(data =>{
                    if (data.data.code=='-998'){
                        this.error('你无该权限!');
                    }else if (data.data){

                    }else{
                        this.error("编码不能唯一!")
                    }
                })
            }
        }, created() {
            this.showCheckGroup();
        }
    });
</script>
</html>